<template>
  <div>
    <el-table
      :data="tableData"
      height="500"
      style="width: 100%"
      max-height="500"
      border
      v-loading="loading"
    >
      <el-table-column type="index" label="序号" width="80" align="center" />
      <el-table-column
        prop="userGroup"
        label="用户组名称"
        width="200"
        align="center"
      />
      <el-table-column
        prop="permissionGroupStr"
        label="权限组"
        width="660"
        align="center"
      ></el-table-column>
      <el-table-column label="操作" align="center" width="180">
        <template #default="scope">
          <el-button
            type="primary"
            @click="handleEdit(scope.row.id)"
            :disabled="!this.hasAuth('sys:userGroup:update')"
            >修改</el-button
          >
          <el-button
            type="danger"
            @click="handleDelete(scope.row)"
            :disabled="!this.hasAuth('sys:userGroup:delete')"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-drawer
      v-model="editInfo"
      title="信息修改"
      :show-close="false"
      @close="this.$refs.detailInfo.resetFields()"
    >
      <el-form
        ref="detailInfo"
        :model="detailInfo"
        label-width="80px"
        label-position="left"
        :rules="rules"
      >
        <el-form-item label="用户组名" prop="userGroup">
          <el-input v-model="detailInfo.userGroup" type="text"></el-input>
        </el-form-item>

        <el-form-item label="权限组" prop="permissionGroupId">
          <el-select v-model="detailInfo.permissionGroupId" style="width: 100%">
            <el-option
              v-for="item in group"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('detailInfo')"
            >提交</el-button
          >
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<script>
import axios from "../../utils/request";
import { ElNotification } from "element-plus";
export default {
  name: "userGroup",
  inject: ["reload"],
  data() {
    return {
      tableData: [],
      loading: false,
      editInfo: false,
      detailInfo: {},
      rules: {
        userGroup: [
          { required: true, message: "用户组名不允许为空", trigger: "blur" },
        ],
        permissionGroupId: [
          { required: true, message: "权限组不允许为空", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    handleDelete(row) {
      axios.get("/UserGroup/delete", { params: { id: row.id } }).then((res) => {
        if (res.data.status === 200) {
          ElNotification.success(res.data.message);
          this.reload();
        } else {
          ElNotification.error("删除失败，请稍后重试");
        }
      });
    },
    handleEdit(id) {
      this.editInfo = true;
      // console.log(id);
      //获取详情
      axios.get("/UserGroup/detail", { params: { id: id } }).then((res) => {
        this.detailInfo = res.data.data.userGroup;
      });
    },
    // 获取权限组内容
    getPermissionGroupInfo() {
      axios.get("/permissionGroup/info").then((res) => {
        // console.log(res.data);
        this.group = res.data.data.info;
      });
    },
    submitForm(val) {
      this.$refs.detailInfo.validate((valid) => {
        if (valid) {
          axios.post("/UserGroup/upData", this.detailInfo).then((res) => {
            ElNotification.success(res.data.message);
            this.reload();
          });
        } else {
          return false;
        }
      });
    },
    hasAuth(perm) {
      var authority = this.$store.state.menus.permList;
      return authority.indexOf(perm) > -1;
    },
  },
  mounted() {
    this.loading = true;
    axios.get("/UserGroup/UserGroupInfo").then((res) => {
      if (res.data.status === 200) {
        // console.log(res)
        this.tableData = res.data.data.userGroup;
        this.loading = false;
      }
    });

    this.getPermissionGroupInfo();
  },
};
</script>
